<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="queryParams.dictName" placeholder="字典名称" class="filter-item search-item"/>
      <el-input v-model="queryParams.dictType" placeholder="字典类型" class="filter-item search-item"/>
      <el-select v-model="queryParams.status" placeholder="字典状态" class="filter-item search-item">
        <el-option
          v-for="(key,value) in dict.normalStatus"
          :key="value"
          :label="key"
          :value="value"
        />
      </el-select>

      <el-button class="filter-item" type="primary" @click="search">
        {{ $t('table.search') }}
      </el-button>
      <el-button class="filter-item" type="success" @click="reset">
        {{ $t('table.reset') }}
      </el-button>

      <el-button  v-has-permission="['dictType:add']" class="filter-item" type="warning" @click="add">
        {{ $t('table.add') }}
      </el-button>

      <!--<el-dropdown v-has-any-permission="['dictType:add','dictType:delete']" trigger="click" class="filter-item">-->
        <!--<el-button>-->
          <!--{{ $t('table.more') }}<i class="el-icon-arrow-down el-icon&#45;&#45;right"/>-->
        <!--</el-button>-->
        <!--<el-dropdown-menu slot="dropdown">-->
          <!--<el-dropdown-item v-has-permission="['dictType:add']" @click.native="add">{{ $t('table.add') }}</el-dropdown-item>-->
          <!--<el-dropdown-item v-has-permission="['dictType:delete']" @click.native="batchDelete">{{ $t('table.delete') }}-->
          <!--</el-dropdown-item>-->
          <!--&lt;!&ndash;<el-dropdown-item v-has-permission="['user:export']" @click.native="exportExcel">{{ $t('table.export') }}&ndash;&gt;-->
          <!--&lt;!&ndash;</el-dropdown-item>&ndash;&gt;-->
        <!--</el-dropdown-menu>-->
      <!--</el-dropdown>-->
    </div>

    <el-table
      ref="table"
      :key="tableKey"
      v-loading="loading"
      :data="list"
      border
      fit
      style="width: 100%;"
      @selection-change="onSelectChange"
      @sort-change="sortChange"
    >
      <el-table-column type="selection" align="center" width="40px" />
      <!--<el-table-column label="字典编号" prop="dictId" :show-overflow-tooltip="true" align="center" min-width="120px">-->
        <!--<template slot-scope="scope">-->
          <!--<span>{{ scope.row.dictId }}</span>-->
        <!--</template>-->
      <!--</el-table-column>-->
      <el-table-column label="字典名称" prop="dictName" :show-overflow-tooltip="true" align="center" min-width="120px">
        <template slot-scope="scope">
          <span>{{ scope.row.dictName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="字典类型" prop="dictType" :show-overflow-tooltip="true" align="center" min-width="120px">
        <template slot-scope="scope">
          <span>{{ scope.row.dictType }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" prop="status" :show-overflow-tooltip="true" align="center" min-width="120px">
        <template slot-scope="scope">
          <span>{{ dict.normalStatus[scope.row.status] }}</span>
        </template>
      </el-table-column>
      <el-table-column label="备注" prop="remark" :show-overflow-tooltip="true" align="center" min-width="120px">
        <template slot-scope="scope">
          <span>{{ scope.row.remark }}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" prop="createTime" :show-overflow-tooltip="true" align="center" min-width="120px">
        <template slot-scope="scope">
          <span>{{ scope.row.createTime}}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('table.operation')" align="center" min-width="150px" class-name="small-padding fixed-width">
        <template slot-scope="{row}">
          <i class="el-icon-document table-operation" style="color: #87d068;" @click="view(row)" />
          <i v-hasPermission="['dictType:update']" class="el-icon-setting table-operation" style="color: #2db7f5;" @click="edit(row)" />
          <i v-hasPermission="['dictType:delete']" class="el-icon-delete table-operation" style="color: #f50;" @click="singleDelete(row)" />
          <el-link v-has-no-permission="['dictType:update','dictType:delete']" class="no-perm">
            {{ $t('tips.noPermission') }}
          </el-link>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="pagination.num" :limit.sync="pagination.size" @pagination="search" />
    <dictTypeEdit
      ref="edit"
      :dialog-visible="dialog.isVisible"
      :title="dialog.title"
      :normalStatus="dict.normalStatus"
      :formData="dialog.formData"
      @success="editSuccess"
      @close="editClose"
    />
  </div>
</template>

<script>
  import {
    getDictTypePage,
    deleteDictType,
  } from '@/api/system/dict'
  import Pagination from '@/components/Pagination'
  import dictTypeEdit from './DictTypeEdit'
  export default {
    name: "DictType",
    components: { Pagination, dictTypeEdit },
    data() {
      return {
        dialog: {
          isVisible: false,
          title: '',
        },
        tableKey: 0,
        loading: false,
        list: [],
        total: 0,
        queryParams: {},
        sort: {},
        selection: [],
        pagination: {
          size: 10,
          num: 1
        },
        dict:{
          normalStatus:{0:"正常",1:"停用"}
        }
      }
    },
    mounted() {
      this.fetch()
    },
    methods: {
      search() {
        this.fetch({
          ...this.queryParams,
          ...this.sort
        })
      },
      reset() {
        this.queryParams = {}
        this.sort = {}
        this.$refs.table.clearSort()
        this.$refs.table.clearFilter()
        this.search()
      },
      add(){
        this.dialog.title = "添加字典类型"
        this.dialog.isVisible = true
      },
      edit(row){
        this.$refs.edit.setInfo(row)
        this.dialog.title = "修改字典类型"
        this.dialog.isVisible = true
      },
      view(row){
        this.$router.push({
          name: 'DictDataList',
          query: {
            dictType:row.dictType
          },
        })
      },
      singleDelete(row){
        this.$refs.table.toggleRowSelection(row, true)
        this.batchDelete()
      },
      batchDelete(){
        if (!this.selection.length) {
          this.$message({
            message: this.$t('tips.noDataSelected'),
            type: 'warning'
          })
          return
        }
        this.$confirm(this.$t('tips.confirmDelete'), this.$t('common.tips'), {
          confirmButtonText: this.$t('common.confirm'),
          cancelButtonText: this.$t('common.cancel'),
          type: 'warning'
        }).then(() => {
          const dictTypes = []
          this.selection.forEach((u) => {
            dictTypes.push(u.dictType)
          })
          this.delete(dictTypes)
        }).catch(() => {
          this.clearSelections()
        })
      },
      clearSelections() {
        this.$refs.table.clearSelection()
      },
      delete(dictTypes){
        this.loading = true
        deleteDictType(dictTypes.join(",")).then(res=>{
          if(res.code==200){
            this.$message({
              message: this.$t('tips.deleteSuccess'),
              type: 'success'
            })
            this.search()
          }
        }).finally(()=>{
          this.loading = false
        })
      },
      editSuccess(){
        this.search()
      },
      editClose(){
        this.dialog.isVisible = false
      },
      onSelectChange(selection) {
        this.selection = selection
      },
      sortChange(val) {
        this.sort.field = val.prop
        this.sort.order = val.order
        this.search()
      },
      fetch(params = {}) {
        params.pageSize = this.pagination.size
        params.pageNum = this.pagination.num
        getDictTypePage(params).then(res=>{
          if(res.code==200){
              const data = res.data
              this.total = data.total
              this.list = data.rows
          }
        }).finally(()=>{
          this.loading = false
        })
      },
    }
  }
</script>

<style scoped>

</style>
